/**
* 逛店 - 组建
*/
<template>
  <article :class="getName">
      <div class="h-overflow">
          <aside class="h-aside fl">
              <p class="h-title">查找店铺</p>
              <p class="mb20">请输入位置（例如： 邮编、地址、城市...），我们将会为您显示最近的精品店。</p>

              <el-form :model="form" label-width="55px">
                  <el-form-item label="区域：">
                      <el-select placeholder="请选择区域" v-model="form.area">
                          <!-- <el-option label="全部" value=""></el-option> -->
                          <el-option :key="item.id" :label="item.title" :value="item.id" v-for="item in areaOption"></el-option>
                      </el-select>
                  </el-form-item>

                  <el-form-item label="店铺：">
                      <el-input placeholder="请输入店铺名" v-model="form.store"></el-input>
                  </el-form-item>

                  <el-form-item>
                      <el-button @click="handleSearchClick" type="primary">搜索店铺</el-button>
                  </el-form-item>
              </el-form>
          </aside>

          <section class="h-section fr">
              <p class="h-title">搜索结果</p>
              <ul>
                  <li :key="item.id" v-for="item in storeList">
                      <p @click="handleStoreClick(item)">{{ item.name }}</p>
                      <address>{{ item.address }} <br><span>TEL: {{ item.tel }}</span></address>
                  </li>
              </ul>

              <el-pagination :current-page.sync="pagination.pageNum" :hide-on-single-page="true" :page-size="pagination.pageSize" :total="pagination.total"
                             @current-change="handleCurrentChange"
                             background layout="prev, pager, next"></el-pagination>
          </section>
      </div>
      <div class="h-area" id="allmap" v-if="mapFlag">
          <baidu-map :center="map.center" :scroll-wheel-zoom="true" :zoom="map.zoom" @ready="handler" class="bm-view">
              <!-- 缩放左上角 标志 -->
              <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>

              <!--聚合动态添加的点坐标-->
                    <bm-marker-clusterer :averageCenter="true">
                        <bm-marker v-for="marker of markers" :key="marker.id" :position="{lng: marker.JD, lat: marker.WD}" @click="lookDetail(marker,'left')" ></bm-marker>
                    </bm-marker-clusterer>
              <!-- 定位 -->
               <!--信息窗体-->
                    <bm-info-window :position="{lng: infoWindow.info.JD, lat: infoWindow.info.WD}"  :title="infoWindow.info.name" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
                        <!-- <p><span class="left">店铺名称：</span><span class="right">{{infoWindow.info.name}}</span></p> -->
                        <p><span class="left">联系电话：</span><span class="right">{{infoWindow.info.tel}}</span></p>
                        <p><span class="left">联系地址：</span><span class="right">{{infoWindow.info.address}}</span></p>
                    </bm-info-window>
              <bm-geolocation :autoLocation="true" :showAddressBar="true" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-geolocation>
              <!-- @locationSuccess="getLoctionSuccess" @locationError="getLocationError"-->
              <!-- 右下角 手动定位按钮 -->
              <bm-panorama></bm-panorama>
              <!-- 定位图标 -->
              <bm-marker :dragging="true" :position="center" animation="BMAP_ANIMATION_BOUNCE">
              </bm-marker>

          </baidu-map>
      </div>
  </article>
</template>
<script>
// import { areaList, storeMockList } from '@/mock' // 区域数据
import { areaData, searchStore } from '@/api'
import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'
  import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
    import BmMarker from 'vue-baidu-map/components/overlays/Marker'
     import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

export default {
  name: 'store',
  components: {
    BmGeolocation,
    BmMarkerClusterer,
            BmMarker,
            BmInfoWindow

  },
  props: {},
  data () {
    return {
      form: {
        area: '',
        store: '',
      },
      storeList: [], // 店铺列表
      areaOption: [], // 店铺所在地区 列表
      pagination: {
        total: 100,
        pageNum: 1, // 当前页
        pageSize: 5, // 每页条数
      },
      // 百度
      center: { lng: 0, lat: 0 },
      zoom: 3,
       map:{
          center: {lng: 118.802422,lat:32.065631},//'南京市',
          zoom: 10
      },
       infoWindow: {
                    JD: 0,
                    WD: 0,
                    show: false,
                    info:{
                        id: "",
                        name: "",
                        address: "",
                        TEL: "",
                        WD: "",
                        JD: "",
                    },
                },
      // 百度
      mapFlag: false,
       markers:[],
       activeName: '',
      longitude:null,
      latitude:null,
      storename:"",
      strorenum:0,
      terminal: '', // 终端类型
    }
  },
  computed: {
    getName(){
      if(this.terminal === 'pc'){
        return 'h-store'
      } else {
        return 'h-store h-store-ph'
      }
    }
  },
  created () {
    this.terminal = localStorage.getItem('terminalm')
    console.log('this.terminal***', this.terminal)
    //this.getSearchStore()
    this.getAreaData() // 查询店铺 分布区域列表
   // this.areaMap() // 地图初始化
  },
  mounted () {
    // this.areaOption = areaList.result // 使用接口时 此处删除
    // this.storeList = storeMockList.result.list // 使用接口时 此处删除
     this.getAreaData() // 查询店铺 分布区域列表
  },
  methods: {
     infoWindowClose (e) {
       console.log(e)
                this.infoWindow.show = false
            },
            infoWindowOpen (e) {
              console.log(e)
                this.infoWindow.show = true
            },
    //查看详情
    lookDetail(data, target){
        // console.log('data',data)
        this.infoWindow.show =true;
        this.infoWindow.info=data;
        this.activeName = data.name;
        console.log(target)
        // let This=this;
        // //为弹窗口标题添加title
        // this.$nextTick(()=>{
        //     var win=document.querySelector(".BMap_bubble_title");
        //     win.title = this.activeName;
        // })
       
    },
    /**
     *@Description
     *@Param
     *@Return 查询按钮 监听事件.
     **/
    handleSearchClick () {
      this.getSearchStore()
    },
    /**
     *@Description
     *@Param
     *@Return 查询店铺 方法封装.
     **/
    getSearchStore () {
      searchStore({ ...this.form, ...this.pagination }).then(res => {
        console.log(res)
        this.storeList = res.list
        this.pagination.total = res.total
          this.getProPositionMap();
        this.mapFlag=true
      })
    },
    /**
     *@Description
     *@Param
     *@Return 查询店铺 分布区域列表.
     **/
    getAreaData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      areaData(params).then(res => {
        this.areaOption = res
         this.getSearchStore()
      })
    },
    /**
     *@Description
     *@Param
     *@Return 分页.
     **/
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.getSearchStore()
    },
    handleStoreClick(store){
      console.log(store)
       this.lookDetail(store, 'left');
      // this.mapFlag=true
      // this.longitude=store.JD
      // this.latitude=store.WD
      // this.storename=store.name
      // // eslint-disable-next-line no-debugger
     
      // this.areaMap()
    },
    /**
     *@Description
     *@Param
     *@Return 高德地图.
     **/
    areaMap () {
    },
     //项目分布地图
    getProPositionMap(){
       searchStore({ ...this.form, ...this.pagination }).then(res => {
        console.log(res)
        this.markers=res.list
        this.mapFlag=true
          this.map.center={lng: res.list[0].JD, lat:  res.list[0].WD};
                    // this.map.zoom = 15;
                    // return;
      })
    },
    handler ({ BMap, map }) {
         console.log(BMap, map)
         this.getProPositionMap();
// //    let _this = this
// // eslint-disable-next-line no-debugger
//        debugger 
//      // var store=this.storeList[this.strorenum];
//       // this.longitude=store.WD
//       // this.latitude=store.JD
//       var name=""
//       var x = 0
//       var y = 0
//       this.storelist.forEach(store => {
//         name=store.name
//         x=store.JD
//         y=store.WD
//          const ggPoint = new BMap.Point(x, y)
//          // 坐标转换完之后的回调函数
//       setTimeout(() => {
//         const convertor = new BMap.Convertor()
//         const pointArr = []
//         pointArr.push(ggPoint)
//         convertor.translate(pointArr, 1, 5, translateCallback)
//       }, 1000)
//       });
     
//       const ggPoint2 = new BMap.Point(x, y)
//       const bm = new BMap.Map('allmap') // 地图初始化
//       bm.enableScrollWheelZoom(true);
//       bm.centerAndZoom(ggPoint2, 15)
//       bm.addControl(new BMap.NavigationControl())
//       // const markergg = new BMap.Marker(ggPoint) // 添加gps marker和label
//       // bm.addOverlay(markergg) // 添加GPS marker
//       // const labelgg = new BMap.Label('未转换的GPS坐标（错误）', { offset: new BMap.Size(20, -10) })
//       // markergg.setLabel(labelgg) // 添加GPS label

//       const translateCallback = function (data) { // 坐标转换完之后的回调函数
//       // eslint-disable-next-line no-debugger
//       // debugger 
//         console.log(data, data.status)
//         if (data.status === 0) {
//           const marker = new BMap.Marker(data.points[0])
//           bm.addOverlay(marker)
//           const label = new BMap.Label(name, { offset: new BMap.Size(20, -10) })
//           marker.setLabel(label) // 添加百度label
//           bm.setCenter(data.points[0])
//         }
//       }
     

//       console.log('BMap, map****************', BMap, map)
//   //  this.center.lng =this.longitude
//   //  this.center.lat = this.latitude
//       this.zoom = 15
    },
  }
}
</script>

<style lang="scss" scoped>
  .h-store {
      overflow: hidden;
      .h-title {
          font-size: 16px;
          margin-bottom: 15px;
          padding: 20px 0;
          color: #333;
          border-bottom: 1px dashed #dcdcdc;
      }
      .h-overflow {
          overflow: hidden;
      }
      /* 侧边 - 查找店铺 */
      .h-aside {
          width: 400px;
      }
      /* 侧边 - 店铺查找结果 */
      .h-section {
          width: 550px;
          li {
              margin-bottom: 15px;
              p {
                  font-size: 16px;
                  margin-bottom: 5px;
                  cursor: pointer;
                  color: #333;
                  &:hover {
                      text-decoration: underline;
                  }
              }
              address {
                  color: #666;
              }
              // span {
              //     padding-left: 10px;
              // }
          }
      }
      /* 底部地图 */
      .h-area {
          width: 100%;
          height: 500px;
          margin: 20px 0;
          border: 1px solid blue;
          .bm-view {
              width: 100%;
              height: 100%;
          }
      }
  }
  /* 移动端 */
  .h-store-ph{
    .h-aside, .h-section{
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;
    }
  }
</style>
